import { Component } from "react";
import { Checkbox } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import IconButton from "@mui/material/IconButton";
import Paper from "@mui/material/Paper";
class TodoItem extends Component {
  constructor() {
    super();
  }

  onChangeHandler() {
    this.props.onChange(this.props.item.id);
  }
  handleClick() {
    this.props.onDelete(this.props.item.id);
  }

  render() {
    let title = this.props.item.title;
    if (this.props.item.isFinished) {
      title = <s>{title}</s>;
    }
    return (
      <Paper>
        <div className="todo_item">
          <div>
            <Checkbox
              onChange={this.onChangeHandler.bind(this)}
              checked={this.props.item.isFinished}
            />
          </div>
          <div className="container">
            <span>{title}</span>
          </div>

          <div className="right-tools">
            <IconButton
              aria-label="delete"
              onClick={this.handleClick.bind(this)}
              color="secondary"
            >
              <DeleteIcon />
            </IconButton>
          </div>
        </div>
      </Paper>
    );
  }
}

export default TodoItem;
